<template>
  <view>
    <!--是否显示 已认领/寻回 的物品-->
    <view :style="{display: 'flex'}">
      <view class="showButton" :style="{backgroundColor: BgColor}" @click="showButton">
        <view class="button" :style="{marginLeft: buttonLeft}"></view>
      </view>
      <view :style="{ color: 'gray', fontSize: '26rpx', marginTop: '40rpx', marginLeft: '20rpx' }">是否隐藏已被认领和寻回的物品</view>
    </view>


    <view class="title">
      <view class="lose" @click="indexTitleHandle(0)">
        失物招领
        <view :class="indexTitle==0?'line':''"></view>
      </view>
      <view class="seek" @click="indexTitleHandle(1)">
        寻物启事
        <view :class="indexTitle==1?'line':''"></view>
      </view>
    </view>

    <!-- 当选择了失物招领标题时 -->
    <view v-if="indexTitle==0">
      <view class="loseContent">
        <!--  && item.title==searchText -->
        <view class="content" v-for="(item, index) in lose" :key="index" @click="loseContent(item.id)"
          v-if="item.state!=loseShow">
          <!--  -->
          <view class="img">
            <!-- v-if="item.image!=''" -->
            <image :src="item.indexImg"></image>
          </view>
          <view class="list">
            <view class="title">
              {{item.title}}
            </view>
            <!-- <view class="button">{{item.upshot}}</view> -->
            <view class="button">认领中</view>
          </view>
          <!-- <view class="nowThing">类型：{{item.nowThing}}</view> -->
          <view class="nowThing">类型：数码</view>
          <view class="user" :style="{display: 'flex'}">
            <view class="imageUser">
              <image :src="headImg"></image>
              <!-- <image :src="item.headImg"></image> -->
            </view>
            <view class="userName">{{item.issueName}}</view>
            <view class="icon">
              <image src="../../static/images/index-icon/title.png"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 当选择了寻物启事标题时 -->
    <view v-else>
      <view class="loseContent">
        <view class="content" v-for="(item, index) in seek" :key="index" @click="loseContent(item.id)"
          v-if="item.state!=seekShow">
          <!--  -->
          <view class="img">
            <!-- v-if="item.seekImage!=''" -->
            <image :src="item.indexImg"></image>
          </view>
          <view class="list">
            <view class="title">
              {{item.title}}
            </view>
            <!-- <view class="button">{{item.upshot}}</view> -->
            <view class="button">{{item.state == 0? '丢失':'已寻回'}}</view>
          </view>
          <view class="nowThing">类型：日用品</view>
          <!-- <view class="nowThing">类型：{{item.seekNowThing}}</view> -->
          <view class="user" :style="{display: 'flex'}">
            <view class="imageUser">
              <image :src="headImg"></image>
            </view>
            <view class="userName">{{item.issueName}}</view>
            <view class="icon">
              <image src="../../static/images/index-icon/title.png"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="buttom" :style="{ color: 'rgba(180, 180, 180, 0.712)', textAlign: 'center', paddingBottom: '20rpx' }">
      ——到底了——
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchText: '', //搜索关键词
        seekShow: "-1", //寻物启事是否隐藏寻回的物品
        loseShow: "-1", //失物招领是否显示已认领的物品
        BgColor: "rgb(168, 168, 168)", //按钮初始背景
        buttonLeft: "0rpx", //按钮小圆圈的位置
        indexTitle: 0, //标题当前选择的下坐标
        nowThing: "",
        lose: [], //失物招领内容
        seek: [],
        headImg: 'https://img.wxcha.com/m00/12/db/594dd9fb43029a58df9acc0e4591d94b.jpg?down',
        lossTotalPage: 0, //总页数
        findOwnerTotalPage: 0,
        lossCurrPage: 1,
        findOwnerCurrPage: 1,
        findOwnerUrl: 'http://8.130.114.82:5555/bbm/findowner/list?limit=4&page=1',
        lossUrl: 'http://8.130.114.82:5555/bbm/loss/list?limit=4&page=1',
        isLoading: 'false'
      }
    },
    methods: {
      indexTitleHandle(e) {
        this.indexTitle = e

      },


      async onLoad(options) {
        this.searchText = options.title
        // console.log(search)
        uni.showLoading({
          title: '数据加载中...',
        });

        //查询两个表提取用户发布的物品信息
        if (this.searchText !== '') {
          this.findOwnerUrl = this.findOwnerUrl + '&title=' + this.searchText
        }
        const {
          data: res
        } = await uni.request({
          // url: 'http://8.130.114.82:5555/bbm/findowner/list?limit=5&page=1' + this.searchText === '' ? '' :
          //   '&title=' + this.searchText,
          url: this.findOwnerUrl

        })
        this.lose = res.page.list
        this.findOwnerTotalPage = res.page.totalPage

        if (this.searchText !== '') {
          this.lossUrl = this.lossUrl + '&title=' + this.searchText
        }
        const {
          data: res2
        } = await uni.request({
          // url: 'http://8.130.114.82:5555/bbm/loss/list?limit=5&page=1' + this.searchText === '' ? '' : '&title=' +
          //   this.searchText,
          url: this.lossUrl
        })
        this.seek = res2.page.list
        this.lossTotalPage = res2.page.totalPage
        console.log(res)
        console.log(res2)
        uni.hideLoading()
      },

      /**
       * 上拉触底事件
       */
      async onReachBottom() {
        // 获取丢失物品或拾取物品分页数据
        if (this.isLoading === 'true') {
          console.log('请求被阻塞')
          return
        }
        if (this.indexTitle === 1) {
          this.lossCurrPage = this.lossCurrPage + 1;
          if (this.lossCurrPage > this.lossTotalPage) {
            uni.showToast({
              title: '数据加载完毕',
              icon: 'none',
              duration: 1000
            })
            return
          }
          this.isLoading = 'true'
          uni.showLoading({
            title: '数据加载中...',
          });
          const {
            data: res
          } = await uni.request({
            url: this.lossUrl.replace(/page=1/g, 'page=' + this.lossCurrPage)
          })
          this.seek = [...this.seek, ...res.page.list]
          uni.hideLoading()
        } else {
          this.findOwnerCurrPage = this.findOwnerCurrPage + 1;
          if (this.findOwnerCurrPage > this.findOwnerTotalPage) {
            uni.showToast({
              title: '数据加载完毕',
              icon: 'none',
              duration: 1000
            })
            return
          }
          uni.showLoading({
            title: '数据加载中...',
          });
          this.isLoading = 'true'
          const {
            data: res
          } = await uni.request({
            url: this.findOwnerUrl.replace(/page=1/g, 'page=' + this.findOwnerCurrPage)
          })
          this.lose = [...this.lose, ...res.page.list]
          uni.hideLoading()
        }

        this.isLoading = 'false'

      },

      loseContent(id) {
        if (this.indexTitle == 0) {
          uni.navigateTo({
            url: "../loseContent/loseContent?id=" + id
          })
        } else {
          uni.navigateTo({
            url: "../seekContent/seekContent?id=" + id
          })
        }
      },

      showButton() {
        if (this.BgColor == "rgb(99, 255, 94)") {
          this.BgColor = "rgb(168, 168, 168)",
            this.buttonLeft = "0rpx",
            this.loseShow = "-1",
            this.seekShow = "-1"
        } else {
          this.BgColor = "rgb(99, 255, 94)",
            this.buttonLeft = "116rpx",
            this.loseShow = "1",
            this.seekShow = "1"

        }
      }
    }
  }
</script>

<style lang="scss">
  /* 侧导航 */
  .side {
    background-color: #fff;
    width: 100rpx;
    height: 200rpx;
    border-radius: 50rpx;
    position: fixed;
    top: 1100rpx;
    left: 630rpx;
  }

  .side .go {
    margin-left: 13rpx;
    margin-top: 10rpx;
  }

  .side .go image {
    width: 80rpx;
    height: 80rpx;
  }

  .side .add {
    font-size: 50rpx;
    background-color: #ffd23c;
    width: 90rpx;
    border-radius: 50%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 0rpx;
    font-weight: bold;
    color: #fff;
  }

  /* 搜索框 */
  .search {
    display: flex;
    width: 90%;
    background-color: #fff;
    height: 80rpx;
    margin: 0 auto;
    margin-top: 35rpx;
    border-radius: 60rpx;
  }

  .search .img {
    margin-top: 17rpx;
    margin-left: 27rpx;
  }

  .search .img image {
    width: 50rpx;
    height: 50rpx;
  }

  .search .input {
    margin-top: 20rpx;
    margin-left: 27rpx;
    color: #b6b6b6;
    font-size: 30rpx;
  }

  /* 标签选择 */
  .list {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .list .item {
    background-color: #e2e2e250;
    width: 100rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    padding: 10rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #252525;
  }

  .list .item1 {
    background-color: #ffeb37;
    width: 100rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    padding: 10rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #252525;
  }

  .zjff {
    background-color: #ffd23c;
    height: 60rpx;
    width: 80%;
    line-height: 60rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 25rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
  }

  /* 主标题 */
  .title {
    display: flex;
  }

  .title .line {
    background-color: #ffeb37;
    height: 14rpx;
    border-radius: 35rpx;
    width: 80%;
  }

  .title .lose {
    margin: 30rpx;
    font-size: 38rpx;
  }

  .title .seek {
    margin: 30rpx;
    font-size: 38rpx;
  }

  /* 主标题结束 */

  .showButton {
    width: 180rpx;
    height: 70rpx;
    margin-left: 30rpx;
    margin-top: 20rpx;
    border-radius: 60rpx;
    transition: 0.5s;
  }

  .showButton .button {
    width: 65rpx;
    height: 68rpx;
    margin-top: 2rpx;
    border-radius: 50%;
    background-color: #fff;
    transition: 0.5s;
  }

  /* .showButton .button:hover .showButton{
    background-color: rgb(99, 255, 94);
  }
  .showButton .button:hover{
    margin-left: 110rpx;
  } */
  /* 当选择失物招领时 */
  .loseContent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .loseContent .content {
    border-radius: 30rpx;
    // float: left;
    background-color: #fff;
    width: 300rpx;
    padding: 20rpx;
    margin-left: 25rpx;
    margin-top: 25rpx;
    margin-bottom: 35rpx;
    // overflow: hidden;
  }

  .loseContent .content .img {
    margin-left: 10rpx;
  }

  .loseContent .content .img image {
    height: 280rpx;
    width: 280rpx;
    border-radius: 30rpx;
  }

  .loseContent .content .title {
    margin-top: 10rpx;
    margin-left: 10rpx;
    font-weight: bold;
    width: 117rpx;
    overflow: hidden;
    white-space: nowrap;

    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }

  .loseContent .content .button {
    background-color: #ffd23c;
    border-radius: 30rpx;
    padding: 12rpx;
    font-size: 24rpx;
    text-align: center;
    width: 100rpx;
    margin-top: 5rpx;
  }

  .loseContent .content .nowThing {
    color: gray;
    margin-left: 15rpx;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .loseContent .content .imageUser image {
    width: 55rpx;
    height: 55rpx;
    border-radius: 50%;
    margin-top: 20rpx;
    margin-left: 10rpx;
    border: 5rpx gray solid;
  }

  .loseContent .content .userName {
    margin-top: 30rpx;
    margin-left: 15rpx;
  }

  .loseContent .content .icon image {
    width: 70rpx;
    height: 70rpx;
    // margin-top: -5rpx;
    margin-left: 30rpx;
  }
</style>